<template>
  <div class="card-container">
    <!-- 使用 v-for 遍历 test 数组，动态生成多个 el-card -->
    <el-card
      style="width: 250px; position: relative;" 
      v-for="(item, index) in test"
      :key="index"
    >
      <!-- 渲染每个卡片的图片 -->
      <img :src="item.coverpicture" class="card-image" />

      <!-- 渲染每个卡片的 footer -->
      <template #footer>
        <p>{{ item.pname }}---{{ item.price }}￥</p>
      </template>
      
      <!-- 购买按钮，定位到右下角 -->
      <el-button
        type="success"
        plain
        class="buy-button"
        @click="handleBuy(index)"
      >购买</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref ,onMounted} from 'vue';
import axios from 'axios';
// 定义 test 数组，包含多个卡片的数据
const test = ref([
 {
  "pname": "鲜柠檬一斤",
  "price": 23,
  "coverpicture": "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
 }
]);
   
// 模拟点击购买按钮的处理函数
const handleBuy = (index) => {
  console.log(`购买第 ${index + 1} 个商品`);
};

const getAll= async()=>{
  var _this=this;
  axios({
    method:"get",
    url:"http://localhost:8080/api/selectAllproduct"
  }).then(function (res) {
    _this.test=res.data.data.rows
  })
}
onMounted(() => {
  getAll();  // 页面加载时调用 fetchData 方法
});
</script>

<style scoped>
.card-container {
  display: grid;
  grid-template-columns: repeat(5, 250px); /* 每行 5 个卡片，每个卡片宽度 250px */
  gap: 10px 10px; /* 卡片之间的水平间距为 20px，垂直间距为 10px */
  justify-content: center; /* 水平居中 */
  padding: 20px;
  width: 100%; /* 确保容器宽度占满屏幕 */
  height: 70vh; /* 确保容器的高度为视口高度，方便垂直居中 */
  overflow: auto; /* 如果卡片数量很多，会出现滚动条 */
}

.el-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 卡片内容从顶部开始排列 */
  position: relative; /* 使购买按钮能够定位到卡片的右下角 */
  width: 250px; /* 每个卡片的宽度固定为 250px */
  height: 350px; /* 调整卡片高度为 350px */
}

.card-image {
  width: 100%; /* 图片宽度适应卡片 */
  height: 200px; /* 给图片设置固定高度 */
  object-fit: cover; /* 保持图片比例并裁剪多余部分，保证填满卡片区域 */
}

.buy-button {
  position: absolute; /* 定位到卡片的右下角 */
  bottom: 10px; /* 与底部有 10px 的距离 */
  right: 10px; /* 与右边有 10px 的距离 */
}
</style>
